{% extends "base.html" %}
 

{% block head %}
    <title>主机管理</title>
    <script type="text/javascript" language="JavaScript">
            function deleteJob()
            {
                if(confirm("确定要删除吗?"))
                {
                    return true;
                }else{
                    return false;
                }
            }
        </script>
{% endblock %} 

{% block content %}
            <!-- 按钮触发模态框 -->
            <button class="btn btn-primary btn-md" style="float:left;margin-top:0.1cm" data-toggle="modal" data-target="#myModal">添加主机</button>
            <!-- 模态框（Modal） -->
             <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  &times;
                </button>
                            <h4 class="modal-title" id="myModalLabel">
                  主机添加
                </h4>
                        </div>
                        <div class="modal-body">
                            <form action="/addone/" method="post" class="form-horizontal">
                        <div class="form-group clearfix f14">
                            <label class="col-sm-3 control-label bk-lh30 pt0">服务器名：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="hostname" name="hostname" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">操作系统：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="os" name="os" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">CPU：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="cpu" name="cpu" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">内存：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="memory" name="memory" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix ">
                            <label class="col-sm-3 control-label bk-lh30 pt0">IP地址：</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control bk-valign-top" id="ip" name="ip" placeholder=""> </div>
                        </div>
                        <div class="form-group clearfix">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="submit" class="king-btn mr10  king-success">提交</button>
                                <button type="button" class="king-btn king-default ">取消</button>
                            </div>
                        </div>
                    </form>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
                <!-- /.modal -->
                
            </div> 
            <div style="float:left">
                <form id="searchForm" action="/searchsome/" method="post"  class="form-horizontal">
                    <div class="form-group clearfix " >
                        <p></p>
                        <label class="col-sm-3 control-label bk-lh30 pt0">服务器名称：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control bk-valign-top" id="hostname" name="hostname" placeholder=""> 
                            <p></p>
                            </div>
                        <label class="col-sm-3 control-label bk-lh30 pt0">服务器IP：</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control bk-valign-top" id="ip" name="ip" placeholder=""> 
                            </div>    
                        <label class="col-sm-3 control-label bk-lh30 pt0"></label>
                        <div class="col-sm-9">
                            <button type="submit" class="king-btn mr10  king-success styp" style="float:left;margin-left: 210px;margin-top: 5px;">搜 索</button>
                        </div>
                    </div>
                    </form>
            </div>

        <table class="table mb0 pr15 ranger-box2  " >
                        <thead>
                            <tr>
                                <th >ID</th>
                                <th >主机名</th>
                                <th >操作系统</th>
                                <th >CPU</th>
                                <th >内存</th>
                                <th >IP</th>
                            </tr>
                        </thead>
                        <tbody>
            {%for item in page%}
        <tr style="text-align:left;">
            <td>{{ item.id }}</td><td>{{ item.hostname }}</td><td>{{ item.os }}</td><td>{{ item.cpu }}</td><td>{{ item.memory }}</td><td>{{ item.ip }}</td>
        </tr>
            {%endfor%}
        </tbody>
        </table>
        <!--底部分页按钮显示-->
    <nav aria-label="Page navigation">
		<div class="pagination">
			<ul class="pagination">
			{% if page.has_previous %}   
				<li><a href="/showserver/{{page.previous_page_number}}" aria-label="Previous">
					<span aria-hidden="true">&laquo;</span></a></li>
            {% endif %}

            {% for num in page.paginator.page_range%}  
            	{%if pindex == page.number%}
                	<li><a href="">{{ num }}</a></li>
                {%else%}
                    <li><a href="/showserver/{{num}}">{{ num }}</a></li>
                {%endif%}
             {% endfor %}

             {% if page.has_next %}  
                 <li><a href="/showserver/{{page.next_page_number}}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span></a></li>
              {% endif %}
       		</ul>
		</div>
    </nav>
{% endblock %} 